<template>
  <div class="LoginBox">
    <div class="logo">
      <img src="@/assets/pig.png">
    </div>
    <div class="LoginForm">
      <div class="LoginItem">
        <el-input type="text" v-model="LoginForm.phone" placeholder="请输入电话号"/>
      </div>
      <div class="LoginItem" v-show="!isCode">
        <el-input type="password" v-model="LoginForm.password" placeholder="请输入密码"/>
      </div>
      <div class="LoginItem" v-show="isCode">
        <el-input type="text" v-model="LoginForm.numberCode" placeholder="请输入验证码"/>
      </div>
      <div class="btns" >
        <el-button v-show="isCode" @click="getYZM()" class="codeBtn">
            获取验证码
        </el-button>
        <el-button @click="Login()">
          <i class="iconfont icon-xianxingyoujiantou"></i>
        </el-button>
      </div>
    </div>
    <div class="Tips">
      <span @click="changeIsCode()" v-show="!isCode">验证码登录</span>
      <span @click="changeIsCode()" v-show="isCode">密码登录</span>
      <span>忘记密码？</span>
      <span @click="$router.push('/register')">新用户注册</span>
    </div>
    <div class="LoginWay">
      <div class="Boundary">
        <span class="Line"></span>
        <span>第三方登录</span>
        <span class="Line"></span>
      </div>
      <div class="OtherWay">
        <div v-for="(item, index) in LoginWays" :key="index" class="Way">
          <i :class="item.icon" class="iconfont"></i>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>

import { useStore } from "vuex" 
import { reactive,ref } from "vue"
let isCode=ref(false)
const store = useStore()
const LoginWays = reactive([
  { title: "QQ", icon: "icon-qq" },
  { title: "微信", icon: "icon-weixin" },
  { title: "支付宝", icon: "icon-zhifubaozhifu1" },
]);

const LoginForm = reactive({
  phone:'19906908239',
  password:'root',
  numberCode:'6884'
});

// phone:'19906908239',
// password:'root',
// numberCode:'6884'
const getYZM=()=>{
  alert('获取验证码')
  store.dispatch("user/getCode",LoginForm.phone)
}

const Login =()=>{
  if(!isCode.value) store.dispatch("user/pswLogin",LoginForm)
  else store.dispatch("user/phoneLogin",LoginForm)
}
const changeIsCode= ()=>{
  isCode.value = !isCode.value
}
</script>

<style lang="scss" scoped>
.LoginBox {
  box-sizing: border-box;
  width: 100%;
  height: 9.26rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #999;
  color: #fff;
  padding: 0.4rem 0px;
  background: url("@/assets/background.png");
    img{
        width: 1.6rem;
        height: 1.7rem;
        border-radius:50%;
        background-color: rgb(178,221,244);
    }
  
}
.LoginForm {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 80%;

  .LoginItem {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 0.2rem;
  }
  :deep(.el-button) {
    width: 1.5rem;
    height: 0.8rem;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0.4rem;
    i{
      font-size: 0.4rem;
      font-weight: bold;
      color: #82bd24;
    }
  }
  .codeBtn{
    background-color: #8BCE1F;
    color: #fff;
    font-size: 0.2rem;
    font-weight: bold;
    border: 0px;
  }
}
.Tips {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  height: 0.5rem;
  color: #FFF;
  font-size: 0.16rem;
  font-weight: bold;
  span {
    text-align: center;
    width: 30%;
    margin: 5px 10px
  }
}
.LoginWay {
  width: 100%;
  .Boundary {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.14rem;
    font-weight: bold;
    color: #fff;
    .Line {
      flex: 1;
      height: 1px;
      border-top: 1px solid #fff;
      margin: 0px 0.2rem;
    }
  }
  .OtherWay {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 1rem;
    .Way {
      i {
        font-size: 0.6rem;
        color: #fff;
      }
    }
  }
}
.el-input{
    height: 0.7rem;
    ::v-deep .el-input__wrapper{
        background-color: rgba( 255, 255, 255, 0.6 );
        border-radius: 0.35rem;
        padding: 0rem 0.1rem;
        .el-input__inner{
            text-align: center;
            font-size: 0.25rem;
        }
    }
}  
</style>
